<style lang="less">
@import "./style.less";
</style>

<template>
	<div class="trainee-home">
		<div class="home-header">
			<div class="home-title">
				<div class="brand">
					<img :src="require('../../assets/images/icons/brand.png')" class="logo">
					<div class="brand-name">蝌蚪智慧银行学习云平台</div>
				</div>
			</div>
			<div class="title">
				<div class="center-tab">
					<div :class="{ 'tab-button':true, 'tab-button-active': currentTabName === 'home' }" @click="tabClick('home')">首页</div>
					<div
						:class="{ 'tab-button':true, 'tab-button-active': currentTabName === 'learning' }"
						@click="tabClick('learning')"
					>学习中心</div>
					<div :class="{ 'tab-button':true, 'tab-button-active': currentTabName === 'exam' }" @click="tabClick('exam')">考试中心</div>
					<div
						:class="{ 'tab-button':true, 'tab-button-active': currentTabName === 'knowledge' }"
						@click="tabClick('knowledge')"
					>知识中心</div>
					<div
						:class="{ 'tab-button':true, 'tab-button-active': currentTabName === 'learningfile' }"
						@click="tabClick('learningfile')"
					>学习档案</div>
				</div>
			</div>
		</div>
		<div class="home-body">
			<div class="tabs">
				<tab-home v-if="currentTabName === 'home'"/>
				<tab-learning v-else-if="currentTabName === 'learning'"/>
				<tab-knowledge v-else-if="currentTabName === 'knowledge'"/>
				<tab-exam v-else-if="currentTabName === 'exam'"/>
				<tab-learning-file v-else-if="currentTabName === 'learningfile'"/>
			</div>
		</div>
	</div>
</template>

<script>
/**
 * 学员主页
 */
import { mapGetters, mapActions, mapMutations } from "vuex";
import tabHome from "./tabs/tabHome";
import tabLearning from "./tabs/tabLearning";
import tabKnowledge from "./tabs/tabKnowledge";
import tabExam from "./tabs/tabExam";
import tabLearningFile from "./tabs/tabLearningFile";
import pageConfig from "./config";

export default {
  name: "traineeHome",
  components: {
    "tab-home": tabHome,
    "tab-learning": tabLearning,
    "tab-knowledge": tabKnowledge,
    "tab-exam": tabExam,
    "tab-learning-file": tabLearningFile
  },
  data() {
    return {
      activeName: "1",
      dialogMode: null,
      carouselItems: [
        require("../../assets/images/test/rolling_1.jpg"),
        require("../../assets/images/test/rolling_2.jpg")
      ]
    };
  },
  mounted() {
    this.loadData();
  },
  computed: {
    ...mapGetters(["businesses", "videos", "trainList"]),
    currentTabName() {
      return this.$route.query.tabName ? this.$route.query.tabName : "home";
    }
  },
  methods: {
    ...mapActions([]),
    loadData() {},
    onOperation(e) {
      if (e.prop === "refresh") {
      }
    },
    tabClick(tabName) {
      if (tabName == "learning") {
        this.$router.push({ path: "traineeHome", query: { tabName } });
      } else {
        this.$router.push({ path: "traineeHome", query: { tabName } });
      }
    },
    pageChange(number) {},
    homeTabSwitch() {}
  }
};
</script>
